<script setup lang="ts">
import { reactive, watch } from "vue";
const user = reactive({
  name: "tom",
  info: {
    gender: "男",
    age: 18,
  },
});

// 2. 监听对象中属性的变化
// watch(() => user.info.age, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`)
// })

// setInterval(() => {
//   user.info.age++
// }, 2000);

// 3. 监听对象中多个属性变化
// watch(() => user.info.age, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`)
// })

// watch(() => user.info.gender, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`)
// })

// -----------------对整个对象进行侦听
watch(() => user.info, (newValue) => {
  console.log(newValue)
}, {
  // 深度侦听
  deep: true,
  // 一进入就执行一次回调函数
  immediate: true
})

// setInterval(() => {
//   user.info.age++
// }, 2000);
</script>

<template>
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
  <button @click="user.info.gender = '女'">修改性别</button>
</template>